<template>
	<view class="content">
		<navigator open-type="navigate" url="/pages/senderRecipientForm/senderForm/senderForm">
			<view class="block-view-child bg-white">
				<view class="block-view">
					<view>
						<label>寄件人</label>
						<input class="sender-ipt" placeholder="请输入寄件人信息" />
					</view>
					<view>
						<uni-icons type="right" color="#8c8c8c"></uni-icons>
					</view>
				</view>
			</view>
		</navigator>
		<navigator open-type="navigate" url="/pages/senderRecipientForm/recipientForm/recipientForm">
			<view class="block-view-child bg-white">
				<view class="block-view">
					<view>
						<label>收件人</label>
						<input class="sender-ipt" placeholder="请输入收件人信息" />
					</view>
					<view>
						<uni-icons type="right" color="#8c8c8c"></uni-icons>
					</view>
				</view>
			</view>
		</navigator>
		<view class="block-view-child bg-white">
			<label>物品类型</label>
			<radio-group :value="type" class="radio-group">
				<label class="radio">
					<radio value="r1" checked="true" /><text>文件</text>
				</label>
				<label class="radio">
					<radio value="r2" /><text>其他</text>
				</label>
			</radio-group>
			<view class="weight-view">
				<label>预估重量</label>
				<button class="weight-btn weight-btn-sub" @tap="reduce" :disabled="weight===1">-</button>
				<view>{{ weight }}kg</view>
				<button class="weight-btn weight-btn-add" @tap="plus">+</button>
			</view>
			<radio-group :value="method" class="radio-group">
				<label class="radio">
					<radio value="r1" checked="true" /><text>网点自寄</text>
				</label>
				<label class="radio">
					<radio value="r2" /><text>自行联系快递员</text>
				</label>
				<label class="radio">
					<radio value="r2" /><text>一小时上门</text>
				</label>
			</radio-group>
			<radio-group :value="payType" class="radio-group">
				<label class="radio">
					<radio value="r1" checked="true" /><text>寄付现结</text>
				</label>
				<label class="radio">
					<radio value="r2" /><text>到付</text>
				</label>
				<label class="radio">
					<radio value="r2" /><text>寄付月结</text>
				</label>
			</radio-group>
		</view>
		<view class="block-view btn-view">
			<view class="block-view-child">
				<button class="btn" @tap="submit">确&nbsp;&nbsp;&nbsp;&nbsp;定</button>
			</view>
		</view>
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'r1', // 物品类型
				weight: 1, // 预估重量
				method: 'r1', // 寄送方式
				payType: 'r1', // 寄付方式
				msgType: 'success',
				messageText: '这是一条成功提示',
			}
		},
		methods: {
			reduce() {
				if (this.weight > 1) {
					this.weight--
				}
			},
			plus() {
				this.weight++
			},
			submit() {
				this.messageText = `保存成功！`
				this.$refs.message.open()
				console.log('params', {
					type: this.type,
					weight: this.weight,
					method: this.method,
					payType: this.payType
				})
			}
		}
	}
</script>

<style>
	.content {
		background-color: #f2f2f2;
		padding: 10px;
		height: 100%;
		box-sizing: border-box;
	}

	.block-view {
		padding-top: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.bg-white {
		background-color: white;
	}

	.block-view-child {
		padding: 10px;
		border-radius: 10px;
		margin-bottom: 10px;
		flex: 1;
	}


	.sender-ipt {
		margin-top: 10px;
	}

	.radio {
		border: 1px solid lightgray;
		margin: 5px;
		padding: 10px 10px;
		border-radius: 15px;
		font-size: 10px;
		min-width: 60px;
	}

	.radio-group {
		margin-top: 20px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.weight-view {
		margin-top: 20px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.weight-btn {
		margin-left: 30px;
		width: 80px;
		border: 1px solid rgba(0, 0, 0, .2);
		overflow: hidden;
	}

	.weight-btn::after {
		border: none;
	}

	.weight-btn-sub {
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
	}

	.weight-btn-add {
		border-top-right-radius: 20px;
		border-bottom-right-radius: 20px;
	}

	.btn {
		width: 60%;
		background-color: royalblue;
		color: white;
	}

	.btn-view {
		margin-bottom: 10px;
	}
</style>